<template>
  <div>
    <el-form :inline="true" :model="filmItem">
      <el-form-item>
        <el-input v-model="filmItem.filmName" placeholder="资源名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd " v-model="filmItem.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择时间" value-format="HH:mm:ss" v-model="filmItem.date2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="getFilmInfo()">查询</el-button>
        <el-button v-if="isAuth('sys:role:save')" type="primary">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="filmData" style="width: 100%">
      <el-table-column type="expand" fixed>
        <template slot-scope="props">
          <el-form label-position="left" class="demo-table-expand">
            <el-form-item label="资源名称:">
              <span>{{ props.row.filmName }}</span>
            </el-form-item>
            <el-form-item label="所占空间大小(MB):">
              <span>{{ props.row.filmStore }}</span>
            </el-form-item>
            <el-form-item label="存储路径:">
              <span>{{ props.row.filmUrl }}</span>
            </el-form-item>
            <el-form-item label="创建时间:">
              <span>{{ props.row.createdAt }}</span>
            </el-form-item>
            <el-form-item label="创建人:">
              <span>{{ props.row.createdBy }}</span>
            </el-form-item>
            <el-form-item label="更新时间:">
              <span>{{ props.row.modifiedAt }}</span>
            </el-form-item>
            <el-form-item label="更新人:">
              <span>{{ props.row.modifiedBy }}</span>
            </el-form-item>
            <el-form-item label="排序:">
              <span>{{ props.row.sorted }}</span>
            </el-form-item>
            <el-form-item label="热点值:">
              <span>{{ props.row.hotPoint }}</span>
            </el-form-item>
            <el-form-item label="播放次数:">
              <span>{{ props.row.playCount }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column fixed prop="filmName" label="资源名称" width="250">
      </el-table-column>
      <el-table-column fixed prop="filmStore" label="所占空间大小(MB)" width="150">
      </el-table-column>
      <el-table-column fixed prop="filmUrl" label="存储路径" width="250">
      </el-table-column>
      <el-table-column fixed prop="createdAt" label="创建时间" width="200">
      </el-table-column>
      <el-table-column fixed prop="createdBy" label="创建人" width="150">
      </el-table-column>
      <el-table-column fixed prop="modifiedAt" label="更新时间" width="200">
      </el-table-column>
      <el-table-column fixed prop="modifiedBy" label="更新人" width="150">
      </el-table-column>
      <el-table-column fixed prop="sorted" label="排序" width="150">
      </el-table-column>
      <el-table-column fixed prop="hotPoint" label="热点值" width="150">
      </el-table-column>
      <el-table-column fixed prop="playCount" label="播放次数" width="150">
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="primary" icon="el-icon-edit" @click="editItem"></el-button>
            <el-button type="primary" icon="el-icon-delete" @click="deleteItem"></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      filmData: [],
      dialogTitle: "修改",
      dialogVisiable: false,
      filmItem: {
        filmName: '',
        storeMin: 0,
        sotreMax: 0,
        date1: '',
        date2: ''
      }
    }
  },
  methods: {
    deleteItem() { },
    resetForm(formName) {
      this.$refs[formName].resetForm();
    },
    dialogEnter() {
      //TODO
      this.dialogVisiable = false;
    },
    dialogCancel() {
      this.$message({
        type: 'info',
        message: '已取消修改'
      });
      this.dialogVisiable = false;
    },
    editItem() {

      this.dialogVisiable = true;
    },
    getFilmInfo() {
      this.$http({
        url: this.$http.adornUrl('/film/film/list'),
        method: 'get',
        params: this.$http.adornParams({
          'filmName': this.filmItem.filmName,
          'beginTime': this.filmItem.date1 + this.filmItem.date2
        })
      }).then(({ data }) => {
        console.log(data);
        this.filmData = data.page.list;
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getFilmInfo();
  },
  mounted() { },   //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() { },  //生命周期 - 创建之前
  beforeMount() { },   //生命周期 - 更新之前
  updated() { },       //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { },     //生命周期 - 销毁完成
  activeated() { }     //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
